<template>
	<view>
		<view class="input_box" style="border-top:1px solid #EEEEEE;padding-bottom:unset;">
			<view class="info_list" style="margin-top:15upx;text-indent:unset;border-bottom:1upx solid #f6f6f6;display:flex;">
				<text class="font_size">代理类别：</text>
				<view class="input agent_type">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in items" :key="item.value">
								<radio :value="item.value" :checked="index === current" color="#52c41a" style="transform:scale(0.7);" />
								{{item.name}}
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="input_box" style="background-color:#f7fcf5;">
			
			<view class="info_list">
				<view><image src="../../static/yq.png"></image><text class="font_size">申请要求：</text></view>
				<view class="text" :class="{disshow:current == 0}">
					<view>180一张会员卡，1000张会员卡；</view>
					<view>1台5.6万元设备</view>
				</view>
				<view class="text" :class="{disshow:current == 1}">
					<view>150一张会员卡，1万张会员卡（10家门店）；</view>
					<view>1台5.6万元设备</view>
				</view>
				<view class="text" :class="{disshow:current == 2}">
					<view>120一张会员卡，10万张会员卡（10个代理）；</view>
					<view>1台5.6万元设备</view>
				</view>
			</view>
			<view class="info_list">
				<view class="font_size"><image src="../../static/qy.png"></image><text class="font_size">会员权益：</text></view>
				<view class="text" :class="{disshow:current == 0}">
					<view>1万保证【传统180*1000=18万，先给33张中国加油卡，完成1000张销售退回（每张退10元）】</view>
					<view>1万元设备押金【价值5.6万值，完成1000张销售退回，不经营，一年之后以每年20%残损费计算，设备可随时退回】</view>
					<view>直接分享赚119元/支</view>
					<view>通过会员分享赚70元/支</view>
					<view>推荐门店奖励5000元，从1001张起每开卡一张享受5元补贴</view>
				</view>
				<view class="text" :class="{disshow:current == 1}">
					<view>6万保证【传统150*10000=150万，先给200张中国加油卡，完成1万张销售退回（每张退6元）】</view>
					<view>1万元设备押金【价值5.6万值，完成1000张销售退回，不经营，一年之后以每年20%残损费计算，设备可随时退回】</view>
					<view>直接分享赚149元/支</view>
					<view>通过会员分享赚99元/支</view>
					<view>通过门店分享赚30元/支</view>
					<view>门店1万保证金全收（自己配33张卡给到门店）</view>
					<view>推荐代理奖励3万元，从10001张起每开卡一张享受3元补贴</view>
				</view>
				<view class="text" :class="{disshow:current ==2}">
					<view>24万保证【传统120*100000=1200万，先给800张中国加油卡，完成10万张销售退回（每张退2.4元）】</view>
					<view>1万元设备押金【价值5.6万值，完成1000张销售退回，不经营，一年之后以每年20%残损费计算，设备可随时退回】</view>
					<view>直接分享赚179元/支</view>
					<view>通过会员分享赚129元/支</view>
					<view>通过门店分享赚60元/支</view>
					<view>通过代理分享赚30元/支</view>
					<view>门店1万保证金全收（自己配33张卡给到门店）</view>
					<view>代理6万保证金全收（自己配200张卡给到代理）</view>
					<view>推荐区域奖励8万元，旗下的会员，门店，总代开卡4元补贴</view>
					<view>所辖区域每销售一张享受5元补贴（根据地址返现）</view>
				</view>
				
			</view>
			<view class="info_list">
				<view class="font_size"><image src="../../static/yq.png"></image><text class="font_size">协议内容：</text></view>
				<view class="text" :class="{disshow:current == 0}">
					<view>是发送给京东方打得过还没得更好法规及附加点击速度速度的送人头放假输入统计手电筒输入投诉人然后放入突然就容易 副书记  附加费推荐</view>
				</view>
				<view class="text" :class="{disshow:current == 1}">
					<view>是发送给京东方打得过还没得更好法规及附加点击速度速度的送人头放假输入统计手电筒输入投诉人然后放入突然就容易 副书记  附加费推荐</view>
				</view>
				<view class="text" :class="{disshow:current == 2}">
					<view>是发送给京东方打得过还没得更好法规及附加点击速度速度的送人头放假输入统计手电筒输入投诉人然后放入突然就容易 副书记  附加费推荐</view>
				</view>
				
			</view>
		</view>
		<view class="input_box" style="background-color:#f7fcf5;">
			<view class="info_list" style="padding-top:unset;border-bottom:1px solid #f6f6f6;">
				<checkbox :checked="checkAll" @click="checkAlls()"  />
				<text>我已阅读并同意<text class="smh">《区域代理协议》</text></text>
			</view>
		</view>
		<view style="color:#111111;padding-top:25upx;padding-left:40upx;font-size:28upx;font-weight: bold;">基本信息</view>
		<view class="input_box">
			<view class="input_list">
				<text>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</text>
				<input class="input" type="text" v-model="agent.name" placeholder="必填" placeholder-style="text-align:right;color:#999999;" />
			</view>
			<view class="input_list">
				<text>手机号码：</text>
				<input class="input" type="number" v-model="agent.phone" placeholder="必填" placeholder-style="text-align:right;color:#999999;" />
			</view>
			<view class="input_list">
				<text>身份证号：</text>
				<input class="input" type="number" v-model="agent.id_card" placeholder="必填" placeholder-style="text-align:right;color:#999999;" />
			</view>
			<view class="input_list">
				<text>店铺名称：</text>
				<input class="input" type="text" v-model="agent.shop_name" placeholder="必填" placeholder-style="text-align:right;color:#999999;" />
			</view>
			<view class="input_list">
				<text>所在地区：</text>
				<view class="input">
					<view class="row j-sa">
						
						<view class="">
							<picker @change="bindPickerChangeProvince" :value="indexprovince" :range="provincearr">
								<view>{{provincearr[indexprovince]}}</view>
							</picker>
						</view>
						<view class="">
							<picker @change="bindPickerChangeCity" :value="indexcity" :range="cityarr">
								<view>{{cityarr[indexcity]}}</view>
							</picker>
						</view>
						<view class="">
							<picker @change="bindPickerChangeDistrict" :value="indexdistrict" :range="districtarr">
								<view>{{districtarr[indexdistrict]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="input_list" style="border-bottom:1px solid #f6f6f6;">
				<text>详细地址：</text>
				<input class="input" type="text" v-model="agent.detail_address" placeholder="必填" placeholder-style="text-align:right;color:#999999;" />
			</view>
			<view class="input_list">
				<text>证件照片：</text>
				<view class="input idcard" @tap="idcard()">
					<text>></text><text>上传身份证照片</text>
				</view>
			</view>
			
		</view>
		<view class="submit">
			<view  @click="confirm">提交申请</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				checkAll:false,
				provincearr:[],
				indexprovince: 0,
				cityarr:[],
				indexcity:0,
				districtarr:[],
				indexdistrict:0,
				agent: {
					name:'',
					phone: '',
					id_card: '',
					shop_name:'',
					detail_address: '',
					area_code:0,
					p_areaid:0,
					province:'',
					c_areaid:0,
					city:'',
					d_areaid:0,
					district:''
				},
				items: [{
						value: '1',
						name: '门店'
					},
					{
						value: '2',
						name: '代理',
						checked: 'true'
					},
					{
						value: '3',
						name: '区域'
					}
				],
				current: 0,
				cards:[]
			}
		},
		onLoad:function(){
			if(!uni.getStorageSync('keyToken')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			uni.request({
				url: request.common.baseUrl+'/api/address/province',
				data: {},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						uni.setStorageSync('keyProvinces',res.data.data)
						this.agent.area_code=res.data.data[0].areaCode
						this.agent.p_areaid=res.data.data[0].areaId
						this.agent.province=res.data.data[0].areaName
						for (var j = 0; j < res.data.data.length; j++) {
							this.provincearr.push(res.data.data[j].areaName)
						}
					}
				}
			})
		},
		methods: {
			checkAlls: function (){
				this.checkAll=!this.checkAll
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			idcard(){
				uni.navigateTo({
					url: '/pages/agent/idcard'
				})
			},
			bindPickerChangeProvince(e) {
				this.indexprovince = e.target.value
				uni.request({
					url: request.common.baseUrl+'/api/address/cityDistrict',
					data: {
						parentId:uni.getStorageSync('keyProvinces')[e.target.value].areaId
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.cityarr=[]
							this.districtarr=[]
							this.indexcity = 0
							this.indexdistrict = 0
							this.agent.area_code=uni.getStorageSync('keyProvinces')[e.target.value].areaCode
							this.agent.p_areaid=uni.getStorageSync('keyProvinces')[e.target.value].areaId
							this.agent.province=uni.getStorageSync('keyProvinces')[e.target.value].areaName
							uni.setStorageSync('keyCitys',res.data.data)
							for (var j = 0; j < res.data.data.length; j++) {
								this.cityarr.push(res.data.data[j].areaName)
							}
						}
					}
				})
				
			},
			bindPickerChangeCity(e) {
			    this.indexcity = e.target.value
				uni.request({
					url: request.common.baseUrl+'/api/address/cityDistrict',
					data: {
						parentId:uni.getStorageSync('keyCitys')[e.target.value].areaId
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.districtarr=[]
							this.indexdistrict = 0
							this.agent.area_code=uni.getStorageSync('keyCitys')[e.target.value].areaCode
							this.agent.c_areaid=uni.getStorageSync('keyCitys')[e.target.value].areaId
							this.agent.city=uni.getStorageSync('keyCitys')[e.target.value].areaName
							uni.setStorageSync('keyDistrics',res.data.data)
							for (var j = 0; j < res.data.data.length; j++) {
								this.districtarr.push(res.data.data[j].areaName)
							}
						}
					}
				})
				
			},
			bindPickerChangeDistrict(e) {
			    this.indexdistrict = e.target.value
				this.agent.area_code=uni.getStorageSync('keyDistrics')[e.target.value].areaCode
				this.agent.d_areaid=uni.getStorageSync('keyDistrics')[e.target.value].areaId
				this.agent.district=uni.getStorageSync('keyDistrics')[e.target.value].areaName
				
			},
			confirm(){
				if(this.checkAll){
					uni.request({
						url: request.common.baseUrl+'/api/agent/agentApply',
						data: {
							token:uni.getStorageSync('keyToken'),
							name:this.agent.name,
							phone:this.agent.phone,
							id_card:this.agent.id_card,
							shop_name:this.agent.shop_name,
							detail_address:this.agent.detail_address,
							agent_type:this.current+1,
							p_areaid:this.agent.p_areaid,
							province:this.agent.province,
							c_areaid:this.agent.c_areaid,
							city:this.agent.city,
							d_areaid:this.agent.d_areaid,
							district:this.agent.district,
							f_id:uni.getStorageSync('keyAgent_code_id'),
							m_id:uni.getStorageSync('keyMagent_code_id'),
							area_code:this.agent.area_code,
							card_img:uni.getStorageSync('keycard_img'),
							card_imgb:uni.getStorageSync('keycard_imgb')
							// card:this.cards
						},
						header: {
							'Content-Type':'application/json;charset=UTF-8',
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if(res.data.code==200){
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000,
								})
								setTimeout(function () {
								    uni.navigateBack({
								    	delta:1
								    })
								}, 2000);
							}else{
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000,
								})
							}
						}
					})
				}else{
					uni.showToast({
						title: '未同意协议',
						icon: 'none',
						duration: 2000,
					})
				}
				
			}
		}
	}
</script>

<style>
page{
	background-color: #ffffff;
}

.input_box{
	width:700upx;
	padding:0 25upx 25upx 25upx;
}
.info_list{
	width:650upx;
	margin-left:25upx;
	padding-top:25upx;
	padding-bottom:25upx;
	border-bottom:1upx dashed #e5e9e8;
}
.smh{
	color:#4cbeba;
}
.info_list .text{
	width:570upx;
	display:none;
}
.info_list .text view{
	width:570upx;
	margin:0 40upx;
}
.disshow{
	display:unset !important;
}
.info_list .text view{
	font-size:24upx;
}
.info_list view text{
	margin-left:10upx;
}
.info_list view image{
	width:34upx;
	height:34upx;
	vertical-align:sub;
}
.font_size{
	font-size:28upx;
	color: #111111;
}
.input_list{
	width:700upx;
	padding-top:25upx;
	padding-bottom:25upx;
	border-top:1upx solid #f6f6f6;
	text-indent:20upx;
}
.input_list:nth-child(1){
	border-top:unset;
}
.input_list text{
	color:#333333;
	font-size:24upx;
	height:60upx;
	line-height:60upx;
}
.input_list .input{
	width:540upx;
	color:#999999;
	font-size:24upx;
	display:inline-block;
	overflow:unset;
	height:60upx;
	line-height:60upx;
}
.idcard{
	height:40upx !important;
	line-height:40upx !important;
}
.idcard text{
	color:#999999;
	float:right;
}
.submit{
	margin:50upx auto;
	text-align:center;
}
.submit view{
	background-color:#ff6101;
	color:#FFFFFF;
	font-size:28upx;
	width:650upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}
</style>
